<template>
    <div id="login">
        <el-form :model="formInline" ref="formInline" :rules="rules" class="demo-form-inline">
            <el-form-item label-width="80px" label="用户名" prop="user">
                <el-input v-model="formInline.user" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label-width="80px" label="密码" prop="pass">
                <el-input v-model="formInline.pass" placeholder="密码" show-password></el-input>
            </el-form-item>
            <el-form-item label-width="80px">
                <el-button type="primary" @click="onSubmit()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {login} from '@/api/web/classifcation'
    import {setToken} from '@/api/util/auth'
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Login",
        data(){
            return{
                formInline:{
                    user:'',
                    pass:''
                },
                rules:{
                    user:[{require:true,message:'请输入用户名',trigger:'blur'}],
                    pass:[{require:true,message:'请输入密码',trigger:'blur'}]
                }
            }
        },
        methods:{
            onSubmit(){
                this.$refs['formInline'].validate((valid)=>{
                    if(valid){
                        let params = {
                            account:this.formInline.user,
                            password:this.formInline.pass
                        }
                        login(params).then((res)=>{
                            let {code,data} = res.data
                            if(code === 200){
                                setToken(data)
                                this.$router.push({path:"/home"})
                            }else{
                                this.$message.error(data.msg)
                            }
                            console.log(res)
                        })
                    }else{
                        return false
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
#login{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
</style>
